
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.container{
			margin: 50px auto;
		}
		.item{
			width: 90%;
			margin: 20px auto;
			padding-left: 10%;
		}
		.item .nav ul{
			list-style: none;
			display: flex;
			width: 85%;
			height: 100px;
			justify-content: space-around;
			line-height: 100px;
			background-color:#DB7093 ;
		}
		.item .nav ul li a{
			text-decoration: none;
			color: #000000;
			font-size: 16px;
			transition-duration: 0.5s;
		}
		.item .nav ul li a:hover{
			color: #FFFAFA;
			transition-duration: 0.5s;
		}
		.box{
			width: 90%;
			height: 350px;
			 padding-left: 10%; 
		}
		.box .box-header{
			width: 75%;
			line-height: 40px;
			border: 1px solid #7FFF00;
			display: flex;
			justify-content: flex-start; 
			justify-content: space-around;
		}
		.box .box-header h4{
			width: 80%;
			margin: 0;
			padding: 0;
			font-size: 24px;
			font-weight: normal;
			padding-left: 2%;
			padding-right: 30%;
		}
		.box .box-header h3{
			width: 55%;
			margin: 0;
			padding: 0;
			font-weight: normal;
			font-size: 16px;
		}
		.box .box-body{
			margin: 20px;
		}
		.box .box-body table tr th{
			font-weight: normal;
			font-size: 14px;
			text-align: center;
			padding: 2px;
			font-family: "黑体";
		}
		.box .box-body table tr th:nth-child(1){
			width: 30px;
		}
		.box .box-body table tr th:nth-child(2){
			text-align: left;
			padding-left: 10px;
			padding-right: 540px;
		}
		.box .box-body table tr th:nth-child(3){
			padding-right: 70px;
		}
	</style>
</head>
<body>
	<div class="container">
		
		<div class="item">
			<div class="nav">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">百变自由行</a></li>
					<li><a href="#">亲子旅行</a></li>
					<li><a href="#">户外旅行</a></li>
					<li><a href="#">高端旅行</a></li>
					<li><a href="#">定制旅行</a></li>
					<li><a href="#">景点介绍</a></li>
				</ul>
			</div>
		</div>
		
		<div class="box">
			<div class="box-header">
				<h4>旅行社排行榜</h4>
				<h3>最具实力旅行社</h3>
			</div>
			<div class="box-body">
				<table>
					<tr>
						<th>排名</th>
						<th>旅行社</th>
						<th>所在城市</th>
						<th>积分</th>
					</tr>
					<tr>
						<th>1</th>
						<th>青岛中航国际旅行社有限公司</th>
						<th>青岛</th>
						<th>58968</th>
					</tr>
					<tr>
						<th>2</th>
						<th>青岛亚太国际旅行社有限公司</th>
						<th>青岛</th>
						<th>57117</th>
					</tr>
					<tr>
						<th>3</th>
						<th>新疆中国旅行社有限公司</th>
						<th>乌鲁木齐</th>
						<th>521111</th>
					</tr>
					<tr>
						<th>4</th>
						<th>扬州舜天国际旅行社有限公司</th>
						<th>扬州</th>
						<th>498240</th>
					</tr>
				</table>
			</div>
		</div>
		
	</div>
</body>
</html>